<template>
        <div class="booklist-item-ulbox">
          <ul class="booklist-ul">
            <li class="booklist-li" v-if="item.srfmajortext"><div class="text-box">{{item.srfmajortext}}</div></li>
            <li class="booklist-li" ><div class="text-box">{{"45.5"}}</div></li>
            <li class="booklist-li" v-if="item.subtitle"><div class="text-box">{{item.subtitle}}</div></li>
            <li class="booklist-li" v-if="item.content"><div class="text-box">{{item.content}}</div></li>
          </ul>
    </div>
</template>
<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Provide,
  Emit,
  Watch
} from "vue-property-decorator";

@Component({
  components: {}
})
export default class AppTableList extends Vue{

  /**
   * 传入item
   * @type {any}
   * @memberof AppStatusList
   */
  @Prop() public item?:any;

};
</script>
<style>
.booklist-ul {
  display: flex;
  justify-content: space-around;
  margin: 0;
}
.booklist-li {
padding: 0.7em 0.3em;
    margin: 0;
}
.booklist-ulbox {
  border: solid 0.0625em #cccccc;
}
.booklist-item-ul {
  display: flex;
  justify-content: space-around;
}
.booklist-item-ulbox {
  border: solid 0.0625em #cccccc;
  border-top: none;
}
.text-box{
  width: 4em;
  text-align: center;
}
</style>